<template>
  <div class="quited">
      <!-- 头部标题 -->
    <div class="header">
      <div>
        <a href="javascript:history.go(-1)"
          ><img id="back" src="img/返回.png" alt=""
        /></a>
      </div>
      <span>设置</span>
    </div>
    <div class="username">
        <div>
            <img src="img/toux.jpg" alt="" class="tu1">
            <span>用户名</span>
        </div>        
        <img src="img/more.png" alt="">
    </div>
    <!-- 一些设置 -->
    <div class="main">
        <ul>
            <li>
                <router-link to="/address">
                    <span>我的收货地址</span>
                    <img src="img/more.png" alt="">
                </router-link>               
            </li>
            <li>
                <router-link to="/">
                    <span>账户与安全</span>
                    <img src="img/more.png" alt="">
                </router-link>
            </li>
            <li>
                <router-link to="/">
                    <span>地区设置</span>
                    <img src="img/more.png" alt="">
                </router-link>
            </li>
            <li>
                <router-link to="/">
                    <span>关于</span>
                    <img src="img/more.png" alt="">
                </router-link>
            </li>
        </ul>
    </div>
    <!-- 退出登录 -->
      <div class="out">
          <span @click="quit">退出登录</span>
          <!-- <router-link to="/index" @click.native="quit"> 退出登录</router-link> -->
      </div>
  </div>
</template>

<style  scoped>
/* 退出登录 */
.out{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.out span{
    width: 90%;
    height: 40px;
    background:#FE5900;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
}
/*  */
.quited{
  width: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
}
/* 头部登录标题 */
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.173333rem;
  line-height: 1.173333rem;
  background-color: white;
  text-align: center;
}
.header span {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.header div {
  position: absolute;
  left: 0;
  top: 0;
  margin-left: 5px;
}
.header div img {
  width: 0.533333rem;
}
.header a {
  font-size: 0.373333rem;
  color: #aaa;
}
/* 用户名 */
.username{
  width: 100%;
  margin-top: 50px;
  background: #fff;
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.username div img:nth-child(1){
    width: 48px;
    height: 48px;
    border-radius: 100%;
}
.username div span{
    font-size: 14px;
    padding-left: 5px;
}
.username img:nth-child(2){
    zoom: 0.8;
}
/* 一些设置 */
.main{
    width: 100%;
}
.main ul {
    list-style: none;
}
.main ul li{
    background: #fff;
    margin: 5px 0;
    padding: 0 5px;
}
.main ul li a{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #212529;
    padding: 10px 0;
}
.main ul li a span{
    font-size: 14px;
}
.main ul li a img{
    zoom: 0.8;
}
/* 退出登录 */

</style>
<script>
export default {
  name: "quited",
  data() {
    return {
      
    };
  },
  components: {},
  methods:{

      quit(){        
        //拿到本地缓存属于该用户的物品信息 
        var arr=JSON.parse(localStorage.getItem("shop")) 
        console.log(arr)
        //拿到当前用户名
        var username=localStorage.getItem("user")
        this.$axios.post('http://118.178.184.210:3000/quited',{name:username,array:arr}).then((data)=>{
            console.log(data);
            if(data.status==200){
                if(data.data.code==200){
                    console.log(111);

                }
            }						
		}).catch(function(err){
			console.log(err);
        })
        //清除本地缓存的用户
        window.localStorage.removeItem('user');
        //清除本地缓存用户的商品信息
        window.localStorage.removeItem('shop');
        //清除本地缓存用户的地址信息
        window.localStorage.removeItem('address');
        //跳转到地址页面
        this.$router.replace({ path: "/my" }); 
        
      }
  }
};
</script>
